<template>
  <div>
    <div>
      <van-nav-bar
        title="城市列表"
        left-arrow
        @click-left="$router.push('/home')"
      />
    </div>
    <!--  -->
    <van-index-bar :index-list="indexList">
      <van-index-anchor :index="key" v-for="(value, key) in allCitys" :key="key"
        >{{ key === '#' ? '当前城市' : key === '热' ? '热门城市' : key }}
        <van-cell
          :title="item.label"
          v-for="item in value"
          :key="item.pinyin"
          @click="giveLocal(key, item)"
        />
      </van-index-anchor>
    </van-index-bar>
  </div>
</template>

<script>
import { citys, hotCitys } from '@/api/home'
export default {
  name: '',
  components: {},
  props: {},
  data() {
    return {
      indexList: [
        '#',
        '热',
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z'
      ],
      allCitys: {
        '#': [
          {
            label: '北京',
            value: 'AREA|88cff55c-aaa4-e2e0',
            pinyin: 'beijing',
            short: 'bj'
          }
        ],
        热: [],
        A: [],
        B: [],
        C: [],
        D: [],
        E: [],
        F: [],
        G: [],
        H: [],
        I: [],
        J: [],
        K: [],
        L: [],
        M: [],
        N: [],
        O: [],
        P: [],
        Q: [],
        R: [],
        S: [],
        T: [],
        U: [],
        V: [],
        W: [],
        X: [],
        Y: [],
        Z: []
      }
    }
  },
  computed: {},
  watch: {},
  async created() {
    // 热门城市
    const res = await hotCitys()
    // console.log(res)
    this.allCitys['热'] = res.body
    // 全部城市
    const { body: res1 } = await citys({ level: 1 })
    res1.forEach((item) => {
      const key = item.short[0].toUpperCase()
      this.allCitys[key].push(item)
    })
    for (const key in this.allCitys) {
      if (this.allCitys[key].length === 0) {
        this.allCitys[key].push({ label: '暂无城市' })
      }
    }
    // console.log(res1, this.allCitys)
  },
  methods: {
    giveLocal(key, obj) {
      // console.log(this.allCitys[key])
      const city = this.allCitys[key].filter((item) => item === obj)
      window.localStorage.setItem('default-city', obj.label)
      // console.log(city)
      this.allCitys['#'] = city
    }
  }
}
</script>

<style scoped lang="less">
.van-nav-bar.van-hairline--bottom {
  position: fixed;
  width: 375px;
  top: 0;
  left: 0;
  z-index: 100;
}
.van-index-bar {
  padding-top: 46px;
  ::v-deep .van-index-anchor{
    .van-cell {
      padding-left: 0px;
      font-size: 16px;
    }
    color: #999;
  }
  ::v-deep .van-index-bar__index {
    margin-bottom: 6px;
    padding: 0;
  }
  ::v-deep .van-index-bar__index--active {
    background-color: #21b97a;
    border-radius: 50%;
    color: white;
  }
}
</style>
